<template>
  <div class="wrap">
    <div class="search">
      <div class="mgb20">
        <user-check-box></user-check-box>

      </div>
      <div class="search-group">
        <diy-date v-model="queryParams.times" @change="test1()" :date-type="2"></diy-date>
        <div class="right">
          <el-button>生成结算单</el-button>
        </div>
      </div>
    </div>
    <div class="content-table">
      <el-tabs v-model="tab" @tab-click="handleClick">
        <el-tab-pane label="订单数据" name="order"></el-tab-pane>
        <el-tab-pane label="仓储数据" name="storage"></el-tab-pane>
      </el-tabs>
      <div class="table">

        <div v-show="tab === 'order'">
          <el-table
            :data="dateData"
            :border="true"
            v-loading="loading"
            stripe
            show-summary
          >
            <el-table-column
              prop="date"
              label="订单编号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="用户名"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stickerNum"
              label="店铺"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="商品数量"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="贴单费用（元）"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="订单时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="贴单时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="完成/取消/退货时间"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>


        <div v-show="tab === 'storage'">
          <el-table
            :data="userData"
            v-loading="loading"
            :border="true"
            stripe
            show-summary
          >
            <el-table-column
              prop="nickname"
              label="日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="remarkName"
              label="100公分以下箱子数量"
              align="center"
            >
              <template slot-scope="{row}">
                {{row.remarkName || '-'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              label="100-150公分箱子数量"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="stickerNum"
              label="150公分以上箱子数量"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cost"
              label="仓储总费用（元）"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import {accountIndex, getIndex} from "@/api/statistics";
import {dateFormat} from "@/utils/common";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";

export default {
  name: "statisticsIndex",
  components: {UserCheckBox, DiyDate},
  computed:{
    tableData(){
      const tableData = [];
      this.data.forEach(item=>{
        if(this.queryParams.showType === 1){
          if(item.orderNum === 0 && item.stickerNum === 0 && item.totalPrice === 0){
            return
          }
        }
        tableData.push(item)
      })
      return tableData;
    },
    tableAccountData(){
      const tableData = [];
      this.accountData.forEach(item=>{
        if(this.queryParams.showType === 1){
          if(item.orderNum === 0 && item.stickerNum === 0 && item.cost === 0){
            return
          }
        }
        tableData.push(item)
      })
      return tableData;
    }
  },
  data(){
    return {
      queryParams:{
        times:[], // 日期
        keywords:'', // 搜索关键字
      },
      cardNumber: {
        userNum: 0,
        accountNum: 0,
        stickerIncome: 0,
        stickerNum: 0,
        storageIncome: 0,
        income: 0,
      }, // 卡片数值
      minDate: null,
      // 日期选项
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '过去90天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
              picker.$emit('pick', [start, end]);
            }
          },
        ],
        disabledDate: time=>{
          if(time.getTime() > Date.now()){
            return true // 选当前时间之前的时间
          }
          if(!this.minDate){
            return false;
          }
          let minTime = this.minDate.getTime()
          let timeTime = time.getTime()
          let diffDays = Math.abs(minTime - timeTime)
          diffDays = diffDays / (1000 * 60 * 60 *24)
          return diffDays > 91;
        },
        onPick: pick =>{
          if(pick.minDate){
            this.minDate = pick.minDate;
          }
        }

      },
      dateData: [
        {}
      ],
      userData: [
        {}
      ],
      accountNum: 0,
      loading:false,

      tab: 'order',
    }
  },
  created() {

    const date = new Date()

    let endTime = dateFormat('yyyy-MM-dd',date)
    date.setDate(date.getDate() - 30)
    let startTime = dateFormat('yyyy-MM-dd',date)

    this.queryParams.times = [startTime,endTime]


  },
  methods:{
    // 切换tab
    handleClick(){
      this.getData()
    },
    disableFunc(time){
      return true
    },
    getData(){
      return;
      if(this.queryParams.times === null || this.queryParams.times.length === 0){
        this.data = [];
        return;
      }
      this.loading = true
      if(this.tab === 'date'){
        getIndex(this.queryParams)
          .then(res=>{
            this.loading = false
            this.data = res.data
          })
      }
      if(this.tab === 'shop'){
        accountIndex(this.queryParams)
          .then(res=>{
            this.loading = false
            this.accountData = res.data
          })
      }
    },
    test1(){
      console.log(this.queryParams)
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .search{
    .search-group{
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
  }
}
.today-card{
  background: inherit;
  background-color: #4A89DC;
}
.yesterday-card{
  background: inherit;
  background-color: #5D9CEC;
}
.user-card{
  background: inherit;
  background-color: #3bafda;
}
.income-card{
  background: inherit;
  background-color: #7db1b1;
}
.header-card{
  color: #FFFFFF;
  font-size: 14px;
  height: 150px;
  .title{
    font-weight: 400;
    font-style: normal;
    color: #FFFFFF;
  }
  .num{
    font-size: 36px;
    font-weight: 500;
    margin: 10px 0;
  }
  .item{
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
    .item-num{
      color: #FFCD00;
    }
  }
}
.content-table{
  margin-top: 20px;

  .table{
    .search{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>
